<template>
  <view class="page">
    <nav-bar :left="true">
      <template #title>
        {{ "设置" }}
      </template>
    </nav-bar>
    <view class="container">
      <!-- 个人信息 -->
      <view class="info">
        <view class="info-item">
          <view class="info-item-left">
            <view class="info-item-left-left">
              <image
                class="profile"
                :src="toCaseImg('icon-logo')"
                mode="widthFix"
              ></image>
            </view>
            <view class="info-item-left-right">
              <view class="name">用户名： admin</view>
            </view>
          </view>
          <view class="info-item-right" @click="toInfo"
            >个人信息<van-icon name="arrow"
          /></view>
        </view>
      </view>
      <!-- 卡片 -->
      <view class="card">
        <view class="card-con">
          <view
            class="card-con-item"
            v-for="(item, index) in cardData"
            :key="index"
            @click="handleKey"
          >
            <view class="card-con-item-top">
              <image class="picture" :src="toCaseImg(item.icon)"> </image>
            </view>
            <view class="card-con-item-bottom">
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>
      <!-- 系统设置 -->
      <view class="system">
        <view class="system-con">
          <view
            class="system-con-item"
            v-for="item in systemData"
            :key="item.title"
            @click="handleToPath(item.path)"
          >
            <view class="system-con-item-left">
              <view class="system-con-item-left-left">
                <svg-icon :iconClass="item.icon" />
              </view>
              <view class="system-con-item-left-right">
                {{ item.title }}
              </view>
            </view>
            <view class="system-con-item-right">
              <van-icon name="arrow" />
            </view>
          </view>
        </view>
        <!-- <van-button type="primary" @click="testBtn">测试弹框</van-button> -->
        <avan-dialog
          :showDialog="showDialog"
          @cancelBtn="cancelBtn"
          @sureBtn="sureBtn"
        ></avan-dialog>
      </view>
    </view>
    <tab-bar :currentTab="currentTab" :tabs="tabs"></tab-bar>
  </view>
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance();
const currentTab = ref(2);
const tabs = proxy.menuTabs();
const cardData = ref([
  {
    icon: "icon-group",
    title: "交流群",
  },
  {
    icon: "icon-online",
    title: "在线客服",
  },
  {
    icon: "icon-feedback",
    title: "反馈社区",
  },
  {
    icon: "icon-like",
    title: "点赞我们",
  },
]);
const systemData = ref([
  {
    icon: "system-peop",
    title: "编辑资料",
    path: "editInfo",
  },
  {
    icon: "system-ques",
    title: "常见问题",
    path: "",
  },
  {
    icon: "system-my",
    title: "关于我们",
    path: "",
  },
  {
    icon: "system-set",
    title: "应用设置",
    path: "settingPage",
  },
]);
const showDialog = ref(false);
function toInfo() {
  navigate("navigateTo", "infoDetail");
}

function handleKey() {
  uni.showToast({
    title: "模块建设中~",
    icon: "none",
  });
}

function handleToPath(path: string) {
  if (path) {
    navigate("navigateTo", path);
  } else {
    uni.showToast({
      title: "模块建设中~",
      icon: "none",
    });
  }
}

function testBtn() {
  console.log("测试按钮");
  showDialog.value = true;
}

function sureBtn(params) {
  showDialog.value = params;
}

function cancelBtn(params) {
  showDialog.value = params;
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 96px);
  background: #f5f6f7;
  overflow: auto;
  position: relative;
  .info {
    width: 100%;
    height: 150px;
    padding: 15px 15px 45px;
    background: url("@/static/images/icon-bg.png") no-repeat center center /
      100% 100%;
    &-item {
      width: 100%;
      height: 100%;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-left {
        flex: 5;
        display: flex;
        align-items: center;
        &-left {
          width: 60px;
          height: 60px;
          background: #fff;
          border-radius: 50%;
          padding: 2px;
          .profile {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        &-right {
          font-size: 18px;
          color: #000;
          padding-left: 15px;
        }
      }
      &-right {
        flex: 2;
        font-size: 14px;
        color: #000;
        text-align: right;
      }
    }
  }
  .card {
    width: 100%;
    height: 140px;
    position: absolute;
    top: 150px;
    left: 0;
    padding: 15px;
    &-con {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 5px;
      &-item {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &-top {
          width: 30px;
          height: 30px;
          .picture {
            width: 100%;
            height: 100%;
          }
        }
        &-bottom {
          margin-top: 8px;
          width: 100%;
          font-size: 14px;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .system {
    width: 100%;
    min-height: 140px;
    position: absolute;
    top: 275px;
    left: 0;
    padding: 15px;
    &-con {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 10px;
      &-item {
        width: 100%;
        padding: 10px 13px;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child {
          border-bottom: none;
        }
        &-left {
          display: flex;
          align-items: center;
          &-left {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-right {
            font-size: 14px;
            color: #000;
            padding-left: 5px;
          }
        }
      }
    }
  }
}
</style>
